/**
 * 新技能get！
 * 命令行执行： npx webpack-dev-server
 * npx 是node内置命令
 */

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {

    // 需注入的总入口文件
    entry:'./src/index.js' , 

    // 打包输出的文件配置
    output : {
        // 输出的js
        filename: 'app.js' , 
        // 输出js放置的路径
        path : path.resolve( __dirname , './dist') ,
        // 是否清理dist
        clean : true
    },

    // 模式
    mode : 'none' , 
    // source map 用于问题定位 定位到源码
    devtool: 'inline-source-map',
    
    plugins: [
        new HtmlWebpackPlugin({
            // 指定 源模版
            template: './index.html' , 
            // 指定打包输出的文件名
            filename: 'app.html',
            // js 注入的位置 body:注入到body标签内； head:注入到head标签内
            inject:'body'
        })
    ] ,

    // webpack-dev-server 监听 文件资源
    devServer: {
        static: './dist'
    } ,

    module:{
        rules:[
            {
                test:/\.css$/,
                /**
                 * css-loader：
                 * style-loader：将css  link写入头部
                 */
                use: ['style-loader' , 'css-loader']
            }
        ]
    }
}